<template>
  <section class="app-main">
    <router-view v-slot="{ Component, route }" :key="routeKey">
      <transition :enter-active-class="animante" mode="out-in">
        <keep-alive :include="tagsViewStore.cachedViews">
          <component
            v-if="!route.meta.link"
            :is="Component"
            :key="route.path"
          />
        </keep-alive>
      </transition>
    </router-view>
    <iframe-toggle />
  </section>
</template>

<script lang="ts">
export default {
  name: "AppMain",
};
</script>

<script setup lang="ts">
import useTagsViewStore from "@/store/modules/tagsView";
import useSettingsStore from "@/store/modules/settings";
import IframeToggle from "@/components/IframeToggle/index.vue";
// import { ComponentInternalInstance } from "vue";
// const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const tagsViewStore = useTagsViewStore();
const route = useRoute();
const routeKey = computed(() => route.path + Math.random());
// 随机动画集合
const animante = ref<string>("");
// const animationEnable = ref(useSettingsStore().animationEnable);
watch(
  () => useSettingsStore().animationEnable,
  (/*val*/) => {
    // animationEnable.value = val;
    // if (val) {
    //     animante.value = proxy?.animate.animateList[Math.round(Math.random() * proxy?.animate.animateList.length)] as string;
    // } else {
    //     animante.value = proxy?.animate.defaultAnimate as string;
    // }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.app-main {
  /* 50= navbar  50  */
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.fixed-header + .app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header + .app-main {
    padding-top: 84px;
  }
}
</style>
